import React, { Component } from 'react';
import { connect } from 'react-redux';

import APIMockStateContextMenu from '../components/api-mock-state-context-menu.jsx';
import APIMockStatusBar from '../components/api-mock-status-bar.jsx';

import { connectWebSocket } from '../actions/websocket-conn-actions.js';
import { reloadMockServer, pushCodeServer, setTimeServer } from '../actions/api-mock-actions.js';
import { showNotification } from '../actions/notifications-actions.js';

/**
 * 底部状态栏
 * @class {StatusBar}
 * @extends {React.Component}
 */
@connect(state => ({
    APIMock: state.APIMock,
    editorStatus: state.editorStatus,
    webSocketConn: state.webSocketConn
}), {
    connectWebSocket,
    reloadMockServer,
    pushCodeServer,
    setTimeServer,
    showNotification
})
export default class StatusBar extends Component {

    componentDidMount() {
        this.props.connectWebSocket();
    }

    renderStatusText(editorStatus) {
        if (editorStatus.selection.count > 1) {
            return (
                <p className="status-text">{editorStatus.selection.count} selection regions</p>
            );
        }

        // 单选
        if (editorStatus.selection.count === 1) {
            return (
                <p className="status-text">{editorStatus.selection.wordCount} characters selected</p>
            );
        }

        return (
            <p className="status-text">Line {editorStatus.cursor.row}, Column {editorStatus.cursor.column}</p>
        );
    }

    translateState(APIMock, webSocketConn) {
        if (!webSocketConn.connected) {
            return {
                text: 'Not Connected',
                iconClass: 'state-danger icon-full-moon'
            };
        }

        if (webSocketConn.connected && APIMock.online) {
            return {
                text: 'Online',
                iconClass: 'state-success icon-full-moon'
            };
        }

        if (webSocketConn.connected && APIMock.time) {
            return {
                text: 'Time',
                iconClass: 'state-success icon-full-moon'
            };
        }

        return {
            text: 'Mock Not Started',
            iconClass: 'state-warning icon-full-moon'
        };
    }

    render() {
        const { editorStatus, APIMock, webSocketConn, reloadMockServer, pushCodeServer, setTimeServer, showNotification } = this.props;
        const statusText = this.renderStatusText(editorStatus);
        const mockState = this.translateState(APIMock, webSocketConn);

        return (
            <div className="status-bar">
                {statusText}
                <APIMockStateContextMenu
                    text={mockState.text}
                    reloadMockServer={reloadMockServer}
                    pushCodeServer={pushCodeServer}
                    setTimeServer={setTimeServer}
                    showNotification={showNotification} />
                <APIMockStatusBar
                    attributes={{
                        className: 'tool-bar'
                    }}
                    iconClass={mockState.iconClass} />
            </div>
        );
    }
}